<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">

	<h:body>

		<ui:composition template="static/theme/censo2011/main.xhtml">
		
	<ui:define name="navegacion">
		<p:menuitem value="Consulta" url="#"/>
		<p:menuitem value="Viviendas" url="viviendas.xhtml"/>	
	</ui:define>
	
			<ui:define name="contenido">
			<ui:include src="static/theme/censo2011/criterio.xhtml" />
<script src="static/js/raphael.js" type="text/javascript"/>
<script src="static/js/mycharts.js" type="text/javascript"/>

<table border="0">
<tr >
<td ><h1><b>Viviendas Totalmente Empadronadas</b></h1></td>
</tr>
<tr>
<td ><div id="grafica1" /></td>
</tr>
</table>



<script type="text/javascript">
// Creates canvas 320 × 200 at 10, 50
//var paper = Raphael(10, 50, 800, 800);

function fin() {
	this.flag = gra1.g.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
}
function fout () {
	this.flag.animate({opacity: 0}, 300, function () {this.remove();});
}

var color = ['#f00','#0f0','#00f','#cc0'];

var gra1 = Raphael("grafica1", 600, 150);

stake_hbar_sensilla(10, 10, 200, 60, [<h:outputText value="#{IndicadorEncuestasSHW.viviendas_emp.val2}"/>, <h:outputText value="#{IndicadorEncuestasSHW.viviendas_emp.val4}"/>], color, gra1);

var c = gra1.rect(250, 20, 10, 10); c.attr("fill", "#f00"); c.attr("stroke-width", "1"); //azul
var c = gra1.rect(250, 65, 10, 10); c.attr("fill", "#0f0"); c.attr("stroke-width", "1"); //verde
var t = gra1.text(380, 25, 'Viviendas esperadas:'); t.attr("font-size", "12"); //Viviendas Empadronadas -- 1
var t = gra1.text(520, 25, '<h:outputText value="#{IndicadorEncuestasSHW.viviendas_emp.val2}"/>'); t.attr("font-size", "12");
var t = gra1.text(380, 40, 'Viviendas recibidas segun las esperadas:'); t.attr("font-size", "12");
var t = gra1.text(520, 40, '<h:outputText value="#{IndicadorEncuestasSHW.viviendas_emp.val1}"/>'); t.attr("font-size", "12");
var t = gra1.text(380, 55, 'Nuevas viviendas recibidas:'); t.attr("font-size", "12");
var t = gra1.text(520, 55, '<h:outputText value="#{IndicadorEncuestasSHW.viviendas_emp.val3}"/>'); t.attr("font-size", "12");
var t = gra1.text(380, 70, 'Total de viviendas recibidas:'); t.attr("font-size", "12");
var t = gra1.text(520, 70, '<h:outputText value="#{IndicadorEncuestasSHW.viviendas_emp.val4}"/>'); t.attr("font-size", "12");
var t = gra1.text(380, 85, 'Porcentaje de viviendas recibidas:'); t.attr("font-size", "12");
var t = gra1.text(520, 85, '<h:outputText value="#{IndicadorEncuestasSHW.viviendas_emp.val5}"/>%'); t.attr("font-size", "12");
 

</script>
			</ui:define>

		</ui:composition>

	</h:body>
</f:view>